<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<link href="bootstrap/3.3.5/dist/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/3.3.5/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="echarts/echarts.min.js"></script>
<script src="echarts/theme/macarons.js"></script>
<script src="echarts/map/china.js"></script>
<style type="text/css">
	
	#workOrderTop10{width:740px;height:250px;}
	#workOrderMap{height:440px;}
	#workOrderTimeZone{height:470px;}
	
	.col-md-3,.col-md-6{padding-left:2.5px; padding-right:2.5px;}
	h4{margin-top: 3px; color: #0F91D0; font-weight:bold;}
	
	table tr:nth-child(even){background-color:#D9EDF7;}
	
</style>
<script>
var theme = "macarons"; //设置主题颜色
</script>
</head>
<body>
<div class="container-fluid">
   <div class="row clearfix"> 
    <!-- 左布局 -->
    <div class="col-md-3"> 
		<!--左上 流程工单统计 -->
		<h4 class="text-center">流程工单统计</h4>
        <table class="table   table-hover table-striped table-condensed"> 
		  <thead> 
		   <tr> 
			<th> 编号 </th> 
			<th> 应用名称 </th> 
			<th> 流程模板总数 </th> 
			<th> 工单总数 </th> 
		   </tr> 
		  </thead> 
		  <tbody> 
		   <tr> 
			<td> 1 </td> 
			<td> TB1 </td> 
			<td> 10 </td> 
			<td> 5 </td> 
		   </tr> 
		   <tr> 
			<td> 2 </td> 
			<td> TB2 </td> 
			<td> 10 </td> 
			<td> 5 </td> 
		   </tr> 
		   <tr> 
			<td> 3 </td> 
			<td> TB3 </td> 
			<td> 10 </td> 
			<td> 5 </td>
		   </tr> 
		   <tr> 
			<td> 4 </td> 
			<td> TB4  </td> 
			<td> 10 </td> 
			<td> 5 </td> 
		   </tr> 
		   <tr> 
			<td> 5 </td> 
			<td> TB5 </td> 
			<td> 10 </td> 
			<td> 5 </td> 
		   </tr>
		  </tbody> 
		 </table> 
		 
		
		 <!-- 左中 正在开发的流程数量统计 -->
		 <h4 class="text-center">正在开发的流程数量统计</h4>
		 <table class="table table-hover table-striped table-condensed"> 
		  <thead> 
		   <tr> 
			<th> 编号 </th> 
			<th> 应用名称 </th> 
			<th> 正在开发的流程数量 </th> 
		   </tr> 
		  </thead> 
		  <tbody> 
		   <tr> 
			<td> 1 </td> 
			<td> TB1 </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 2 </td> 
			<td> TB2 </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 3 </td> 
			<td> TB3 </td> 
			<td> 10 </td>
		   </tr> 
		   <tr > 
			<td> 4 </td> 
			<td> TB4  </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 5 </td> 
			<td> TB5 </td> 
			<td> 10 </td> 
		   </tr> 
		  </tbody> 
		 </table> 
		 
		 
		 <!-- 左下 表单设计数量统计 -->
		 <h4 class="text-center">表单设计数量统计</h4>
		 <table class="table table-hover table-striped table-condensed"> 
		  <thead> 
		   <tr> 
			<th> 编号 </th> 
			<th> 应用名称 </th> 
			<th>表单设计数量 </th> 

		   </tr> 
		  </thead> 
		  <tbody> 
		   <tr> 
			<td> 1 </td> 
			<td> TB1 </td> 
			<td> 10 </td> 
			 
		   </tr> 
		   <tr> 
			<td> 2 </td> 
			<td> TB2 </td> 
			<td> 10 </td> 
			
		   </tr> 
		   <tr> 
			<td> 3 </td> 
			<td> TB3 </td> 
			<td> 10 </td> 
			
		   </tr> 
		   <tr> 
			<td> 4 </td> 
			<td> TB4  </td> 
			<td> 10 </td> 
			
		   </tr> 
		   <tr> 
			<td> 5 </td> 
			<td> TB5 </td> 
			<td> 10 </td> 
			
		   </tr> 
		  </tbody> 
		 </table>  
       
     
	</div>	
	
	<!-- 中间布局 -->
    <div class="col-md-6">
		<!-- 中上 -->
		<div id="workOrderTop10"></div>
		<!-- 间距 -->
		<div style="height:5px;"></div>
		<!-- 中下 -->
		<div id="workOrderMap"></div> 
	</div>
	
	<!-- 右布局 -->
    <div class="col-md-3"> 
	 <!--右上-->
     <div id="workOrderTimeZone"></div> 
	 <!--右下-->
       <h4 class="text-center">流程模板数量统计</h4> 
        <table class="table table-hover table-striped table-condensed"> 
		  <thead> 
		   <tr> 
			<th> 编号 </th> 
			<th> 应用名称 </th> 
			<th> 流程模板数量</th> 
		   </tr> 
		  </thead> 
		  <tbody> 
		   <tr> 
			<td> 1 </td> 
			<td> TB1 </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 2 </td> 
			<td> TB2 </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 3 </td> 
			<td> TB3 </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr> 
			<td> 4 </td> 
			<td> TB4  </td> 
			<td> 10 </td> 
		   </tr> 
		   <tr > 
			<td> 5 </td> 
			<td> TB5 </td> 
			<td> 10 </td> 
		   </tr> 
		  </tbody> 
		 </table> 
    </div> 
    </div> 
   </div> 
   
   <script type="text/javascript" src="map2.js"></script>
</body>
</html>